<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<!--================================================================================
  Item Name: Materialize - Material Design Admin Template
  Version: 4.0
  Author: PIXINVENT
  Author URL: https://themeforest.net/user/pixinvent/portfolio
================================================================================ -->

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="msapplication-tap-highlight" content="no">
    <!--<meta name="description"-->
    <!--content="Materialize is a Material Design Admin Template,It's modern, responsive and based on Material Design by Google. ">-->
    <!--<meta name="keywords"-->
    <!--content="materialize, admin template, dashboard template, flat admin template, responsive admin template,">-->
    <title>BAUHINIA SQUARE Admin</title>
    <!-- Favicons-->
    <link rel="icon" href="images/favicon/favicon-32x32.png" sizes="32x32">
    <!-- Favicons-->
    <link rel="apple-touch-icon-precomposed" href="images/favicon/apple-touch-icon-152x152.png">
    <!-- For iPhone -->
    <meta name="msapplication-TileColor" content="#00bcd4">
    <meta name="msapplication-TileImage" content="images/favicon/mstile-144x144.png">
    <!-- For Windows Phone -->
    <!-- CORE CSS-->
    <link href="css//materialize.css" type="text/css" rel="stylesheet">
    <link href="css//style.css" type="text/css" rel="stylesheet">
    <!-- Custome CSS-->
    <link href="css/custom/custom.css" type="text/css" rel="stylesheet">
    <!-- INCLUDED PLUGIN CSS ON THIS PAGE -->
    <link href="vendors/perfect-scrollbar/perfect-scrollbar.css" type="text/css" rel="stylesheet">
    <link href="vendors/flag-icon/css/flag-icon.min.css" type="text/css" rel="stylesheet">

    <!-- PARSLEY CSS -->
    <link href="css/parsley.css" type="text/css" rel="stylesheet" media="screen,projection">
</head>

<body class="active-parking-rule">
<!-- Start Page Loading -->
<div id="loader-wrapper">
    <div id="loader"></div>
    <div class="loader-section section-left"></div>
    <div class="loader-section section-right"></div>
</div>
<!-- End Page Loading -->
<!-- //////////////////////////////////////////////////////////////////////////// -->
<!-- START HEADER -->
<header id="header" class="page-topbar">
    <!-- start header nav-->
    <div class="navbar-fixed" th:include="header :: header"></div>
    <!-- end header nav-->
</header>
<!-- END HEADER -->
<!-- //////////////////////////////////////////////////////////////////////////// -->
<!-- START MAIN -->
<div id="main">
    <!-- START WRAPPER -->
    <div class="wrapper">
        <!-- START LEFT SIDEBAR NAV-->
        <aside id="left-sidebar-nav" th:include="leftNavigation :: navigation">
        </aside>
        <!-- END LEFT SIDEBAR NAV-->
        <!-- //////////////////////////////////////////////////////////////////////////// -->
        <!-- START CONTENT -->
        <section id="content">
            <!--breadcrumbs start-->
            <div id="breadcrumbs-wrapper">
                <div class="container">
                    <div class="row">
                        <div class="col s10 m6 l6">
                            <h5 class="breadcrumbs-title">停车抵扣规则</h5>
                            <ol class="breadcrumbs">
                                <li><a href="index.html">上海紫荆广场</a>
                                </li>
                                <li><a href="#">规则设置</a>
                                </li>
                                <li class="active">规则 录入</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
            <!--breadcrumbs end-->
            <!-- //////////////////////////////////////////////////////////////////////////// -->
            <!--start container-->
            <div class="container">
                <!--start tab-->
                <div id="basic-tabs" class="section">
                    <!--<h4 class="header">积分规则</h4>-->
                    <div class="row">
                        <!--<div class="col s12">-->
                        <!--<p>When you click on each tab, only the container with the corresponding tab id will become-->
                        <!--visible.</p>-->
                        <!--</div>-->
                        <div class="col s12">
                            <div id="test1" class="col s12">
                                <!-- ////////////////////////////////////// simple form start ////////////////////////////////////// -->
                                <form method="POST" enctype="multipart/form-data" action="/parkingRule"
                                      id="ruleForm"
                                      data-parsley-validate>
                                    <div class="row">
                                        <div class="col s0 m0 l2"></div>
                                        <div class="col s12 m12 l8">
                                            <div class="card-panel" style="margin-top:2em;">
                                                <div class="row">
                                                    <div class="col s12">
                                                        <p>积分抵扣停车费规则</p>
                                                        <div class="divider" style="margin-bottom:1em;"></div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <input type="hidden" id="id" name="id" value="">
                                                    <div class="input-field col s4">
                                                        <div style="float:right;margin-right:50px">
                                                            <i class="material-icons prefix active">star</i>
                                                        </div>
                                                    </div>
                                                    <div class="input-field col s1">
                                                        <p>一元等于</p>
                                                    </div>
                                                    <div class="input-field col s1">
                                                        <input type="number" id="pointsPerYuanId" name="pointsPerYuan" th:value="${model?.pointsPerYuan}"
                                                               class="validate"
                                                               min="1" step="1"
                                                               data-parsley-type="number"
                                                               data-parsley-min="1" data-parsley-min-message="数值低于最小范围"
                                                               equired
                                                               data-parsley-required
                                                               data-parsley-required-message="不能为空"
                                                        />
                                                    </div>
                                                    <div class="input-field col s1">
                                                        <p>积分</p>
                                                    </div>
                                                    <div class="input-field col s4">
                                                        <i class="material-icons prefix active">star</i>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="input-field col s4">
                                                        <div style="float:right;margin-right:50px">
                                                            <i class="material-icons prefix active">star</i>
                                                        </div>
                                                    </div>
                                                    <div class="input-field col s1">
                                                        <p>一天封顶</p>
                                                    </div>
                                                    <div class="input-field col s1">
                                                        <input type="number" id="mostYuanId" name="mostYuan" th:value="${model?.mostYuan}"
                                                               class="validate"
                                                               min="1" step="1"
                                                               data-parsley-type="number"
                                                               data-parsley-min="1" data-parsley-min-message="数值低于最小范围"
                                                               equired
                                                               data-parsley-required
                                                               data-parsley-required-message="不能为空"
                                                        />
                                                    </div>
                                                    <div class="input-field col s1">
                                                        <p>元</p>
                                                    </div>
                                                    <div class="input-field col s4">
                                                        <i class="material-icons prefix active">star</i>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="input-field col s3">
                                                        <div style="float:right;margin-right:50px">
                                                            <i class="material-icons prefix active">star</i>
                                                        </div>
                                                    </div>
                                                    <div class="input-field col s2">
                                                        <p>冻结抵扣的积分</p>
                                                    </div>
                                                    <div class="input-field col s1">
                                                        <input type="number" id="frozenTimeId" name="frozenTime" th:value="${model?.frozenTime}"
                                                               class="validate"
                                                               min="1" step="1"
                                                               data-parsley-type="number"
                                                               data-parsley-min="1" data-parsley-min-message="数值低于最小范围"
                                                               equired
                                                               data-parsley-required
                                                               data-parsley-required-message="不能为空"
                                                        />
                                                    </div>
                                                    <div class="input-field col s1">
                                                        <p>分钟</p>
                                                    </div>
                                                    <div class="input-field col s4">
                                                        <i class="material-icons prefix active">star</i>
                                                    </div>
                                                </div>
                                                <div class="row" style="margin-top:1em">
                                                    <div class="col s12">
                                                        <a href="#" th:onclick="'jvascript:saveRule()'"
                                                           class="waves-effect waves-light btn right"><i
                                                                class="material-icons right">send</i>保&emsp;存
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col s0 m0 l2"></div>
                                    </div>
                                </form>
                                <!-- ////////////////////////////////////// simple form end ////////////////////////////////////// -->
                            </div>
                        </div>
                    </div>
                </div>

                <form id="form-reward" action="/rewardSettings" method="post">
                    <input type="hidden" id="rewardCategory" name="rewardCategory" value="">
                    <input type="hidden" id="rewardType" name="rewardType" value="">
                    <input type="hidden" id="rewardValue" name="rewardValue" value="">
                    <input type="hidden" id="rewardStart" name="rewardStart" value="">
                    <input type="hidden" id="rewardEnd" name="rewardEnd" value="">
                </form>
            </div>

            <!--end tab-->
        </section>
    </div>
    <!--end container-->
    </section>
    <!-- END CONTENT -->
    <!-- START RIGHT SIDEBAR NAV-->
    <aside id="right-sidebar-nav" th:include="rightSidebarNav :: right-sidebar-nav">
    </aside>
    <!-- END RIGHT SIDEBAR NAV-->
</div>
<!-- END WRAPPER -->
</div>
<!-- END MAIN -->
<!-- //////////////////////////////////////////////////////////////////////////// -->
<!-- START FOOTER -->
<footer class="page-footer gradient-45deg-light-cyan-cyan" th:include="footer :: footer">
</footer>
<!-- END FOOTER -->
<!-- ================================================
Scripts
================================================ -->
<!-- jQuery Library -->
<!--<script type="text/javascript" src="vendors/jquery-3.2.1.min.js"></script>-->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
        integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/parsley.js/2.8.0/parsley.min.js"></script>
<!--materialize js-->
<script type="text/javascript" src="js/materialize.min.js"></script>
<!--scrollbar-->
<script type="text/javascript" src="vendors/perfect-scrollbar/perfect-scrollbar.min.js"></script>
<!--plugins.js - Some Specific JS codes for Plugin Settings-->
<script type="text/javascript" src="js/plugins.js"></script>
<!--custom-script.js - Add your own theme custom JS-->
<script type="text/javascript" src="js/custom-script.js"></script>
<script th:inline="javascript">

    function saveRule() {
        var values = $('[name="level-points"]')
        var ids = $('[name="level-id"]')
        var names = $('[name="level-name"]')

        var objs = []

        for (var i = 0; i < values.length; i++) {
            var obj = {
                'level_id': parseInt($(ids[i]).val()),
                'level_name': $(names[i]).val(),
                'points': parseInt($(values[i]).val())
            }

            objs.push(obj)
        }

        log(JSON.stringify(objs))
        $('#pointsJson').val(JSON.stringify(objs))

        $('#ruleForm').submit()
    }

</script>
</body>

</html>